<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 400px;
        border: 1px solid #ddd;
        text-align: center;
        padding-bottom: 10px;
        position: relative;
      }
      .container p {
        font-size: 1.3em;
        font-weight: bold;
        text-align: center;
      }
      .container img {
        width: 340px;
        height: 340px;
        border-radius: 50%;
      }
      .container input {
        width: 340px;
        display: block;
        margin: 10px auto;
      }
      .container .time {
        width: 340px;
        height: 30px;
        margin: 0px auto;
      }
      .container .time .left {
        float: left;
      }
      .container .time .right {
        float: right;
      }
      video {
        background-color: black;
      }
      #canvas {
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <video
        src="assets/let_it_go.mp4"
        id="video"
        width="640"
        height="360"
      ></video>

      <canvas id="canvas" width="640" height="360"></canvas>

      <input id="range" type="range" min="0" value="0" max="195" />
      <div class="time">
        <span class="left">00:00</span>
        <span class="right">00:00</span>
      </div>

      <button id="btn_play">播放/暂停</button>
      <button id="btn_vp">音量+</button>
      <button id="btn_vm">音量-</button>
      <button id="btn_05">0.5倍速</button>
      <button id="btn_1">1倍速</button>
      <button id="btn_2">2倍速</button>
      <button id="btn_fc">进入全屏</button>
      <input type="text" id="dminput" />
      <button id="send">发送弹幕</button>
    </div>

    <script src="assets/moment.js"></script>
    <script>
      // 创建Audio对象  加载数据源
      let audio = document.getElementById("video");

      // 为 #btn_play 绑定事件
      let btnPlay = document.getElementById("btn_play");
      btnPlay.addEventListener("click", () => {
        if (audio.paused) {
          audio.play();
        } else {
          audio.pause();
        }
      });

      // 音量-
      let btnvm = document.getElementById("btn_vm");
      btnvm.addEventListener("click", () => {
        let v = audio.volume;
        audio.volume = Math.max(v - 0.1, 0);
        console.log(audio.volume);
      });

      // 音量+
      let btnvp = document.getElementById("btn_vp");
      btnvp.addEventListener("click", () => {
        let v = audio.volume;
        audio.volume = Math.min(v + 0.1, 1);
        console.log(audio.volume);
      });

      // 倍速播放
      let btn05 = document.getElementById("btn_05");
      let btn1 = document.getElementById("btn_1");
      let btn2 = document.getElementById("btn_2");
      btn05.addEventListener("click", () => {
        audio.playbackRate = 0.5;
      });
      btn1.addEventListener("click", () => {
        audio.playbackRate = 1;
      });
      btn2.addEventListener("click", () => {
        audio.playbackRate = 2;
      });

      // 监听timeupdate事件  每秒执行4次
      audio.addEventListener("timeupdate", () => {
        // 更新进度条
        let range = document.getElementById("range");
        range.max = audio.duration;
        range.value = audio.currentTime;
        // 更新时间文本
        // 通过moment.js计算时间字符串 （通过script引入moment.js）
        // script src="assets/moment.js"
        let dm = moment(audio.duration * 1000);
        let cm = moment(audio.currentTime * 1000);
        let left = document.getElementsByClassName("left")[0];
        let right = document.getElementsByClassName("right")[0];
        left.innerHTML = cm.format("mm:ss");
        right.innerHTML = dm.format("mm:ss");
      });

      // 拖拽进度条，从目标位置继续播放
      let range = document.getElementById("range");
      range.addEventListener("change", () => {
        audio.currentTime = range.value;
      });

      // 进入全屏
      let btnFc = document.getElementById("btn_fc");
      btnFc.addEventListener("click", () => {
        audio.requestFullscreen();
        // btnFc.requestFullscreen()
        //   document.getElementsByClassName('container')[0].requestFullscreen()
      });

      //发送弹幕
      let sendBtn = document.getElementById("send");
      let dmList = [];
      sendBtn.addEventListener("click", () => {
        //获取弹幕内容，添加到弹幕列表中（弹幕对象包括x坐标与内容）
        let val = document.getElementById("dminput").value;
        dmList.push({ x: 600, y: Math.random() * 360, text: val });
        console.log(dmList);
      });

      //启动定时器，没秒60帧更新动画
      let cvs = document.getElementById("canvas");
      let ctx = cvs.getContext("2d");
      ctx.font = "22px 微软雅黑";
      ctx.fillStyle = "#fff";
      //使用window.requestAnimationFrame()改造动话
      function draw() {
        // 耗时代码
        dmList.forEach((item) => {
          item.x--;
        });
        window.requestAnimationFrame(() => {
          ctx.clearRect(0, 0, 640, 360);
          dmList.forEach((item) => {
            ctx.fillText(item.text, item.x, item.y);
          });
        });
        setTimeout(draw, 1000 / 60);
      }
      draw();

      // window.setInterval(()=>{
      //     //清除以前的内容
      //     ctx.clearRect(0,0,640,360);
      //     //遍历弹幕列表，绘制每个弹幕
      //     dmList.forEach(item=>{//item:{x:234,y:234,text:xxx}
      //         item.x--;
      //         ctx.fillText(item.text,item.x,item.y);
      //     })
      // },1000/60);
    </script>
  </body>
</html>
